@import '../../style/mixins/flex';
@import '@devui/theme/styles-var/devui-var.scss';

.#{$devui-prefix}-cascader {
  @include flex(flex-start);

  position: relative;

  > div:nth-child(1) {
    width: 100%;
  }

  &__icon {
    position: absolute;
    right: 5px;
    top: 0;
    height: 100%;
    @include flex;
    @include flex-direction;

    .icon {
      margin: 0;
    }
  }

  &__close {
    .close-icon-container {
      width: 14px;
      height: 14px;
      line-height: 14px;
      cursor: pointer;

      svg {
        width: 14px;
        height: 14px;

        path {
          fill: $devui-shape-icon-fill;
          transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
        }

        &:hover {
          path {
            fill: $devui-shape-icon-fill-hover;
          }
        }
      }
    }
  }

  &__disbaled {
    .icon {
      color: $devui-disabled-text !important;
    }
  }

  input {
    width: 100%;
    padding-right: 16px;
  }

  &__drop-menu-wrapper {
    display: block;
    font-size: 0;
    white-space: nowrap;
    padding: 0;
  }

  &--drop-icon-animation {
    svg path {
      fill: $devui-text;
    }
    transition: transform 0.2s linear;
  }

  &__drop-menu-animation {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  &__dropdown-menu {
    width: auto;
    padding-bottom: 0;
    @include flex('flex-start');
  }

  &__panel {
    padding: 12px 12px;
    max-height: 300px;
    overflow-y: auto;
  }

  &__suggest-list {
    height: 32px;
    padding: 8px 12px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 400;
    font-size: $devui-font-size;
    text-align: left;
    border-radius: $devui-border-radius;

    &:hover {
      color: $devui-brand-active;
      background-color: $devui-list-item-hover-bg;
    }
  }
}

.#{$devui-prefix}-cascader__dropdown--open {
  .#{$devui-prefix}-cascader__icon {
    transform: rotate(180deg);
  }
}

.#{$devui-prefix}-cascader--fade {
  &-bottom {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(-4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }

  &-top {
    &-enter-from,
    &-leave-to {
      opacity: 0.8;
      transform: scaleY(0.8) translateY(4px);
    }

    &-enter-to,
    &-leave-from {
      opacity: 1;
      transform: scaleY(0.9999) translateY(0);
    }

    &-enter-active {
      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
    }

    &-leave-active {
      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
    }
  }
}
